
            <!DOCTYPE html>
            <html>
            <head>
                <title>APP UI自动化测试报告</title>
                <meta charset="utf-8">
                <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                <style>
                    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
                    .container { max-width: 1200px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
                    .header { text-align: center; padding: 20px; background: linear-gradient(135deg, #6e8efb, #a777e3); color: white; border-radius: 8px; margin-bottom: 30px; }
                    .statistics-section { display: flex; justify-content: space-around; margin: 20px 0; flex-wrap: wrap; }
                    .summary { text-align: center; padding: 15px; background-color: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); min-width: 200px; margin: 10px; }
                    .chart-container { width: 400px; margin: 20px auto; }
                    .test-case { border: 1px solid #ddd; margin-bottom: 15px; padding: 15px; border-radius: 8px; }
                    .success { border-left: 5px solid #28a745; }
                    .failure { border-left: 5px solid #dc3545; }
                    .status-badge { display: inline-block; padding: 5px 10px; border-radius: 15px; color: white; font-weight: bold; }
                    .status-success { background-color: #28a745; }
                    .status-failure { background-color: #dc3545; }
                    .error-message { background-color: #fff3f3; padding: 10px; border-radius: 5px; margin-top: 10px; color: #dc3545; font-family: monospace; }
                    .timestamp { color: #666; font-size: 0.9em; }
                    .screenshot { max-width: 100%; margin-top: 10px; border-radius: 4px; }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        <h1>APP UI自动化测试报告</h1>
                        <p>测试执行时间: 2024-12-23 18:54:53</p>
                    </div>

                    <div class="statistics-section">
                        <div class="summary">
                            <h3>总用例数</h3>
                            <p>3</p>
                        </div>
                        <div class="summary">
                            <h3>通过用例</h3>
                            <p style="color: #28a745">3</p>
                        </div>
                        <div class="summary">
                            <h3>失败用例</h3>
                            <p style="color: #dc3545">0</p>
                        </div>
                        <div class="summary">
                            <h3>通过率</h3>
                            <p>100.0%</p>
                        </div>
                    </div>

                    <div class="chart-container">
                        <canvas id="resultChart"></canvas>
                    </div>

                    <script>
                        var ctx = document.getElementById('resultChart').getContext('2d');
                        new Chart(ctx, {
                            type: 'pie',
                            data: {
                                labels: ['通过用例', '失败用例'],
                                datasets: [{
                                    data: [3, 0],
                                    backgroundColor: ['#28a745', '#dc3545'],
                                    borderColor: ['#ffffff', '#ffffff'],
                                    borderWidth: 2
                                }]
                            },
                            options: {
                                responsive: true,
                                plugins: {
                                    legend: { position: 'bottom' },
                                    title: { display: true, text: '测试用例执行结果统计' }
                                }
                            }
                        });
                    </script>

                    
                    <div class="test-case success">
                        <h3>测试用例: app-1</h3>
                        <p>测试点: 测试</p>
                        
                        
                        <div class="test-step">
                            <h4>步骤 1: 点击登录</h4>
                            <span class="status-badge status-success">
                                ✓ 成功
                            </span>
                            <span class="timestamp">2024-12-23 18:54:47</span>
                            
                            
                            
                            
                        </div>
                        
                    </div>
                    
                    <div class="test-case success">
                        <h3>测试用例: app-2</h3>
                        <p>测试点: 测试</p>
                        
                        
                        <div class="test-step">
                            <h4>步骤 2: 等待</h4>
                            <span class="status-badge status-success">
                                ✓ 成功
                            </span>
                            <span class="timestamp">2024-12-23 18:54:53</span>
                            
                            
                            
                            
                        </div>
                        
                    </div>
                    
                    <div class="test-case success">
                        <h3>测试用例: app-3</h3>
                        <p>测试点: 测试</p>
                        
                        
                        <div class="test-step">
                            <h4>步骤 1: 点击确定</h4>
                            <span class="status-badge status-success">
                                ✓ 成功
                            </span>
                            <span class="timestamp">2024-12-23 18:54:53</span>
                            
                            
                            
                            
                        </div>
                        
                    </div>
                    
                </div>
            </body>
            </html>
            